<template>
	<div>
		<el-tabs v-model="currentTag" type="border-card">
			<el-tab-pane label="消息事件">
				<el-form ref="msgEventFormRef" :model="msgEventData" :rules="msgEventDataRules" label-width="80px">
					<el-form-item label="事件名称" prop="EventName">
						<el-input v-model="msgEventData.EventName" /><span>(英文字母，数字，下划线)</span>
					</el-form-item>
					<!-- <el-form-item label="消息类型" prop="MsgType">
            <el-select v-model="msgEventData.MsgType"> <el-optin /> </el-select
          ></el-form-item> -->
					<el-form-item label="消息ID" prop="MsgID"> <el-input v-model="msgEventData.MsgID" />(16进制，四位，如0x0113) </el-form-item>
					<el-form-item><el-checkbox v-model="msgEventData.isErrEndFlow">失败自动结束流程</el-checkbox></el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="定时器">
				<el-form ref="timeoutFormRef" :model="timeoutData" :rules="timeoutDataRules" label-width="80px">
					<el-form-item label="事件名称" prop="EventName">
						<el-input v-model="timeoutData.EventName" /><span>(英文字母，数字，下划线)</span>
					</el-form-item>
					<!-- <el-form-item label="消息类型" prop="MsgType">
            <el-select v-model="timeoutData.MsgType"> <el-optin /> </el-select
          ></el-form-item> -->
					<el-form-item label="定时器ID" prop="TimeoutID">
						<el-input v-model="timeoutData.TimeoutID" />(数字吗，101开始，不同定时器ID不能相同)
					</el-form-item>
					<el-form-item><el-checkbox v-model="timeoutData.isErrEndFlow">失败自动结束流程</el-checkbox></el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import type { RuleItem } from 'async-validator';
// 校验 字母 数字 下划线
const ruleTetterNumUnderline = (rule: RuleItem, value: string, callback: () => void) => {
	if (!/^[A-Za-z0-9_]+$/.test(value)) {
		callback(new Error('事件名称必须是字母,数字,下划线'));
	} else {
		callback();
	}
};
// 校验 十六进制 4位
const ruleHex = (rule: RuleItem, value: string, callback: () => void) => {
	if (!(value.toLowerCase().indexOf('0x') === 0)) {
		callback(new Error('十六进制前面必须加0x'));
	} else if (!/^[A-Fa-f0-9]+$/.test(value.slice(2)) || value.slice(2).length !== 4) {
		callback(new Error('消息ID必须是16进制，四位的'));
	} else {
		callback();
	}
};

const RuleNumber = (rule: RuleItem, value: string, callback: () => void) => {
	if (!isNaN(parseFloat(value) && isFinite(value)) && Number(value) >= 101) {
		callback();
	} else {
		callback(new Error('定时器ID必须是数字并且从101开始'));
	}
};
const state = reactive({
	currentTag: '0',
	msgEventData: {
		EventName: '',
		MsgType: '',
		MsgID: '0x',
		isErrEndFlow: true,
	},
	timeoutData: {
		EventName: '',
		MsgType: '',
		TimeoutID: '',
		isErrEndFlow: true,
	},
	msgEventDataRules: {
		EventName: [
			{ required: true, message: '请输入事件名称', trigger: 'blur' },
			{ validator: ruleTetterNumUnderline, trigger: 'blur' },
		],
		MsgType: [{ required: true, message: '请输入消息类型', trigger: 'blur' }],
		MsgID: [
			{ required: true, message: '请输入事件ID', trigger: 'blur' },
			{ validator: ruleHex, trigger: 'blur' },
		],
	},
	timeoutDataRules: {
		EventName: [
			{ required: true, message: '请输入事件名称', trigger: 'blur' },
			{ validator: ruleTetterNumUnderline, trigger: 'blur' },
		],
		MsgType: [{ required: true, message: '请输入消息类型', trigger: 'blur' }],
		TimeoutID: [
			{ required: true, message: '请输入定时器ID', trigger: 'blur' },
			{ validator: RuleNumber, trigger: 'blur' },
		],
	},
});
const { currentTag, msgEventData, timeoutData, msgEventDataRules, timeoutDataRules } = toRefs(state);

defineExpose({
	currentTag,
	msgEventData,
	timeoutData,
});
</script>

<style scoped>
.el-input {
	height: auto;
}
</style>
